<template>
	<view>
		<view class="setting-container">
			<view class="setting-header">
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信小程序中不显示按钮 -->
				<!-- #endif -->

				<!-- #ifndef MP-WEIXIN -->
				<!-- 非微信小程序平台（包括iOS和Android）显示按钮 -->
				<view class="back-icon">
					<uni-icons type="left" size="25" @click="backPerson()"></uni-icons>
				</view>
				<!-- #endif -->
				<view class="title">
					设置
				</view>
			</view>
			<view class="setting-content">
				<view class="setting-list">
					<view class="setting-item" @click="toUserInfo()">
						<view class="item-name">
							账号资料
						</view>
						<view class="arrow-right">
							<uni-icons class="arrow-next" color="#999" type="right" size="18"></uni-icons>
						</view>
						<view class="user-avatar">
							<img class="user-avatar-img" :src="userDetail.data.userAvatar" alt="" />
						</view>
					</view>
					<view class="setting-item" @click="toAddress()">
						<view class="item-name">
							地址管理
						</view>
						<view class="arrow-right">
							<uni-icons class="arrow-next" color="#999" type="right" size="18"></uni-icons>
						</view>
					</view>
					<view class="setting-item">
						<view class="item-name">
							账号与安全
						</view>
						<view class="arrow-right">
							<uni-icons class="arrow-next" color="#999" type="right" size="18"></uni-icons>
						</view>
					</view>
				</view>
				<view class="setting-list common-margin-top">
					<view class="setting-item common-none-boder">
						<view class="item-name">
							消息通知设置
						</view>
						<view class="arrow-right">
							<uni-icons class="arrow-next" color="#999" type="right" size="18"></uni-icons>
						</view>
					</view>
					<view class="setting-item">
						<view class="item-name">
							清除缓存
						</view>
						<view class="arrow-right">
							<uni-icons class="arrow-next" color="#999" type="right" size="18"></uni-icons>
						</view>
					</view>
				</view>
				<view class="setting-list common-margin-top">
					<view class="setting-item common-none-boder">
						<view class="item-name">
							关于我们
						</view>
						<view class="arrow-right">
							<uni-icons class="arrow-next" color="#999" type="right" size="18"></uni-icons>
						</view>
					</view>
				</view>
				<view class="logout-box" @click="logout()">
					退出登录
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		watch,
		watchEffect
	} from 'vue';
	import { onShow, onHide, onUnload, onLoad } from '@dcloudio/uni-app';
	let backPerson = () => {
		uni.switchTab({
			url: "/pages/person/person"
		})
	}
	let userDetail = ref({
		code: 2000,
		msg: "success",
		data: {
			userId: 1,
			pubilcId: "DX89099990",
			nickname: "唱跳rap篮球",
			gender: "男",
			following: 108,
			followers: 10,
			birthDate: "2004/05/03",
			personalBio: "一枚SRE攻城狮",
			userAvatar: "https://gd-hbimg.huaban.com/f745f4d45175d04e4c85f8c9f34409b1dd5eeb5612e43-VRcM5M_fw1200"
		}
	})

	let logout = () => {
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}

	let toUserInfo = () => {
		uni.navigateTo({
			url: "/pages/userinfo/userinfo"
		})
	}

	let toAddress = () => {
		uni.navigateTo({
			url:"/pages/address/address"
		})
	}
</script>

<style lang="scss" scoped>
	.setting-container {
		width: 100%;
		min-height: 100vh;
		height: auto;
		display: block;
		background: #f8f8fe;
		color: #333;

		.setting-header {
			float: left;
			width: 100%;
			height: 50px;
			display: flex;
			z-index: 1000;
			background: #fff;
			box-sizing: border-box;
			text-align: center;
			justify-content: center;
			align-items: center;

			.title {
				position: absolute;
				line-height: 50px;
				font-size: 18px;
				z-index: 5;
				height: 50px;
			}

			.back-icon {
				z-index: 10;
				position: absolute;
				left: 10px;

			}
		}

		.setting-content {
			width: 100%;
			height: auto;
			float: left;

			.setting-list {
				height: atuo;
				width: 100%;
				float: left;

				.setting-item {
					width: 100%;
					height: 53px;
					background: #fff;
					border-top: 1px solid #dbdbdb;
					box-sizing: border-box;
					padding: 0px 15px;
					float: left;

					.item-name {
						width: auto;
						height: 53px;
						float: left;
						line-height: 53px;
						font-size: 13px;
					}

					.user-avatar {
						width: auto;
						height: 53px;
						float: right;
						box-sizing: border-box;
						padding: 8.5px 0px;
						margin-right: 10px;

						.user-avatar-img {
							width: 36px;
							height: 36px;
							border-radius: 4px;
							box-shadow: 0px 0px 2px 0px #333;
						}
					}

					.arrow-right {
						width: auto;
						height: 53px;
						float: right;

						.arrow-next {
							line-height: 53px;
						}
					}
				}
			}

			.logout-box {
				width: 100%;
				height: 44px;
				line-height: 44px;
				float: left;
				text-align: center;
				font-size: 13px;
				background: #fff;
				margin-top: 15px;
			}

			.common-margin-top {
				margin-top: 15px;
			}

			.common-none-boder {
				border: none !important;
			}
		}
	}
</style>